<template>
  <div class="heaadmain">
    <el-row>
        <el-col :span="8" class="lineheight"><i class="el-icon-bell"></i><span class="highlight">XXXXXXXXXXX 消息通知</span></el-col>
        <el-col :span="8"><div class="center" >网络空间地图</div></el-col>
        <el-col :span="8">
            <div class="right">
                ZZ 时间：<span class="highlight">{{setTime(new Date())}}</span> <el-divider direction="vertical"></el-divider>
                <i class="el-icon-s-custom cursor"></i> <el-divider direction="vertical"></el-divider>
                <i class="el-icon-switch-button cursor"></i>
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script lang='ts'>
import {Component ,Vue} from 'vue-property-decorator'
@Component
export default class Head extends Vue {

     //时间过滤
      setTime (timestamp:any):any{
          var date:any = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          
          var Y:any = date.getFullYear()
          var M:any =
            (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1)
          var D:any = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
          var H:any = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
          var F:any =
            date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
          var MM:any =
            date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return Y +'-'+ M +'-'+ D + ' ' + H + ':' + F + ':' + MM
        }
     
}
</script>

<style lang='scss'>
    .footerheaadmaindata{
        width:100%;
        .mg{
            margin:0 20px;
        }
    }
</style>
<style lang="scss">
    .heaadmain{
        height: 100%;
        width: 100%;
        .lineheight{
            line-height: 30px;
        }
        .highlight{
            color: #23eafe;
            margin-left: 10px;
        }
        .center{
            font-size:30px;
            text-align: center;
            letter-spacing: 8px;
        }
        .right{
            height: 30px;
            line-height: 30px;
            text-align: right;
        }
        .cursor{
            cursor: pointer;
        }
    }
</style>